<template>
    <div class="child-section">
        <buni-header>
            <div class="main">
				<van-overlay :show="isLoading">
				  <div class="empty">
				  	<van-loading type="spinner" color="#1989fa" />
				  </div>
				</van-overlay>
				<div class="module">
					<van-steps :active="active" active-icon="success" active-color="#ff340c">
					  <van-step>融资需求</van-step>
					  <van-step>企业信息</van-step>
					  <van-step>联系人</van-step>
					  <van-step>上传证件</van-step>
					  <van-step>授权书</van-step>
					</van-steps>
				</div>
				<div>
					<van-form @submit="onSubmit" ref="ruleForm" :scroll-to-error='true' :show-error-message='false' label-width='100px'>
						<!-- 生成授权书 -->
						<div class="module">
							<h3>生成授权书（两种方式任选一种）</h3>
							<div class="way">
								<h4>方式一（推荐）：线上自动生成</h4>
								<van-button round block type="info" native-type="button" >点击生成</van-button>
								<p class="info">说明：系统通过第三方软件“e签宝”自动生成加盖企业公章的电子版授权委托书。<a href="">查看e签宝操作流程。</a></p>
							</div>
							<div class="way">
								<h4>方式二：线下人工生成</h4>
								<van-button round block type="info" native-type="button" >点击下载授权书</van-button>
								<van-uploader v-model="fileList" :max-count="1">
								  <van-button round block native-type="button" type="info">点击上传盖章后的授权书</van-button>
								</van-uploader>
								<p class="info">说明：需下载并打印授权模板，填写信息并加盖企业公章后上传授权委托书图片。</p>
							</div>
							<div class="button">
								<van-button round block plain type="default" native-type="button" @click="handleBack">上一步</van-button>
								<van-button round block type="info" native-type="button" @click="handleNext">下一步</van-button>
							</div>
						</div>
					</van-form>
				</div>
			</div>
        </buni-header>
    </div>
</template>

<script>
import buniHeader from "../../components/buniHeader.vue";
import { Toast } from 'vant';
export default {
    name:'authorization',
    components: {
        buniHeader
    },
    data() {
        return {
			active:4,
			timer:null,
			isLoading:false,
			fileList:[]
        }
    },
	created() {
		
	},
    methods: {
		handleBack(){
			this.$router.back()
		},
		handleNext(){
			this.$refs.ruleForm.validate().then(()=>{
				this.isLoading = true;
				this.timer = setTimeout(()=>{
					this.isLoading = false;
					//this.$router.push({path:"/authorization"})
				},500)
			});
		},
		onSubmit(){
			
		},
    },
	beforeDestroy() {
		clearTimeout(this.timer);
	}
}
</script>
<style scoped lang="scss">
.main{
	width: 10rem;
	background: #083bb9;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.empty{
		width: 10rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.module{
		width: calc(10rem - 40px);
		padding: 0.133333rem 0.133333rem;
		border-radius: 0.066666rem;
		margin-bottom: 0.133333rem;
		background-color: #fff;
		h3{
			margin: 0.133333rem 0 0.133333rem 0.133333rem;
			font-size: 32px;
		}
		.way{
			padding: 0 0.4rem;
			margin-top: 0.266666rem;
			.info{
				color: #ccc;
				line-height: 0.533333rem;
			}
		}
		.button{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
}
</style>
<style type="text/css">

.van-uploader__input-wrapper{
		width: calc(10rem - 60px);
	}
.van-button{
	margin-top: 0.266666rem !important;
}
</style>